<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .fade-enter-active {
      animation: fade .5s;
    }

    .fade-leave-active {
      animation: fade .5s reverse;
    }

    @keyframes fade {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .child-view {
      color: #fff;
    }

    .default {
      background-color: blue;
    }

    .foo {
      background-color: red;
    }

    .bar {
      background-color: gray;
    }


    .slide-right-enter-active {
      animation: slide-right .5s;
    }

    .slide-right-leave-active {
      animation: slide-right .5s reverse;
    }

    @keyframes slide-right {
      0% {
        transform: translateX(100px);
        opacity: 0;
      }

      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .slide-left-enter-active {
      animation: slide-left .5s;
    }

    .slide-left-leave-active {
      animation: slide-left .5s reverse;
    }

    @keyframes slide-left {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }

      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>

  <div id="app">
  </div>

  <script>

    const Home = {
      template: `
        <div class="home">
          <h2>Home</h2>
          <p>hello</p>
        </div>
      `
    }
    const Parent = {
      data() {
        return {
          transitionName: 'slide-left'
        }
      },
      beforeRouteUpdate(to, from, next) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        next()
      },
      template: `
        <div class="parent">
          <h2>Parent</h2>
          <transition :name="transitionName" mode="out-in">
            <router-view class="child-view"></router-view>
          </transition>
        </div>
      `
    }

    const Default = { template: '<div class="default">default</div>' }
    const Foo = { template: '<div class="foo">foo</div>' }
    const Bar = { template: '<div class="bar">bar</div>' }

    const router = new VueRouter({
      // mode: 'history',
      routes: [
        { path: '/', component: Home },
        {
          path: '/parent', component: Parent,
          children: [
            { path: '', component: Default, name: 'parentIndex' },
            { path: 'foo', component: Foo, name: 'parentFoo' },
            { path: 'bar', component: Bar, name: 'parentBar' }
          ]
        }
      ]
    })
    router.beforeEach(function (to, from, next) {
      console.log(to)
      next()
    })

    new Vue({
      router,
      template: `
        <div id="app">
          <h1>Transitions</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/parent">/parent</router-link></li>
            <li><router-link to="/parent/foo">/parent/foo</router-link></li>
            <li><router-link to="/parent/bar">/parent/bar</router-link></li>
            <li><router-link :to="{name: 'parentIndex'}">/parent/bar</router-link></li>
          </ul>
          <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
          </transition>
        </div>
      `
    }).$mount('#app')
  </script>
</body>

</html>